<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/static/kindeditor/themes/default/default.css"/>
		<script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
		<script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>
		<script src="static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#div{
				display: none;
				position: fixed;
				top: 200px;
				left: 200px;
				width: 600px;
				border: 1px solid black;
				min-height: 300px;
				
			}
		</style>
	</head>
	<body>
		<div id="div"></div>
		<form action="" id="form" method="post">
			<textarea id="editor_id" name="content" style="width:700px;height:300px;">
			&lt;strong&gt;HTML内容&lt;/strong&gt;
			</textarea>
			<input type="button" name="btn" id="btn" value="提交" />
			<input type="button" id="ttt" value="预览" />
		</form>
		
		<script type="text/javascript">
			var arr=[
        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
        'anchor', 'link', 'unlink', '|', 'about'
];
			KindEditor.ready(function(K) {
                var editor = K.create('#editor_id',{
                	width:'1000px',//设置编辑器的宽
                	//items:['undo', 'redo']	只出现两个undo	后退redo	前进按钮
                	items:arr,	//设置工具栏的按钮
                	uploadJson : '/ajax.php?ajax=upload',	//文件上传程序
					fileManagerJson : '/ajax.php?ajax=file_manager',	//浏览服务器图片空间
					allowFileManager : true,//启用图片空间按钮
                });
                
                $('#btn').click(function(){
                	//console.log(editor.html());
                	//editor.html('<span style="color:red">颜色</span>');//获取或设置编辑器2的html内容
                	//editor.appendHtml('<span style="color:red">颜色</span>');//将指定的HTML内容添加到编辑区域的最后位置。
                	var html=editor.html();
                	$('#editor_id').val(html);
                	var f=$('form').get(0);
                	var form=new FormData(f);
                	$.ajax({
                		type:"post",
                		url:"bin.php",
                		processData:false,
                		contentType:false,
                		data:form,
                		success:function(mgs){
                			console.log(mgs);
                		}
                	});
                });
                $('#ttt').click(function(){
                	$('#div').html(editor.html());
                	$('#div').show();
                });
        });
		</script>
	</body>
</html>
